<template>
  <div class="home">
    <!-- 回到顶部 -->
    <el-backtop :bottom="40"></el-backtop>
    <!-- 头部搜索信息栏 -->
    <header class="home-header">
      <h1 class="home-header__name">科艺智慧小区</h1>
      <div class="home-header__search">
        <el-input placeholder="请输入内容" v-model="searchInput" clearable>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="home-header__user">
        <span>{{userInfo.name}}</span>
        <el-dropdown @command="logOut">
          <img :src="userInfo.headImg ? userInfo.headImg :defaultImg" width="40" height="40" />
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item @click.native="intoSpace">个人空间</el-dropdown-item> -->
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <!-- 头部导航栏 -->
    <nav class="home-nav">
      <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#409EFF" @select="handleSelect">
        <el-menu-item index="homePage">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="payCenter">
          <i class="el-icon-bank-card"></i>
          <span slot="title">缴费中心</span>
        </el-menu-item>
        <el-menu-item index="clean">
          <i class="el-icon-brush"></i>
          <span slot="title">家政清洁</span>
        </el-menu-item>
        <el-menu-item index="fixCenter">
          <i class="el-icon-setting"></i>
          <span slot="title">维修中心</span>
        </el-menu-item>
        <el-menu-item index="news">
          <i class="el-icon-news"></i>
          <span slot="title">公告新闻</span>
        </el-menu-item>
        <el-menu-item index="orderList">
          <i class="el-icon-truck"></i>
          <span slot="title">订单列表</span>
        </el-menu-item>
        <el-menu-item index="messageCenter">
          <i class="el-icon-user"></i>
          <span slot="title">信息中心</span>
        </el-menu-item>
        <el-menu-item index="homePageSuggestion">
          <i class="el-icon-thumb"></i>
          <span slot="title">意见投诉</span>
        </el-menu-item>
      </el-menu>
    </nav>
    <!-- 中间内容部分 -->
    <main class="home-main">
      <keep-alive include="clean">
        <router-view @changeNav="navChange"></router-view>
      </keep-alive>
    </main>
    <!-- 联系致电 -->
    <div class="home-call">
      <h3>科艺智慧小区物业联系方式：13506879544</h3>
    </div>
    <!-- 尾部 -->
    <footer class="home-footer">
      <div class="home-footer__container--top">
        <div class="top__left">
          <i class="el-icon-s-home"></i>
          <h4>科艺智慧小区</h4>
          <span>
            <i class="el-icon-location"></i>
            浙江理工大学科技与艺术学院寝室楼D1小区
          </span>
          <span>
            <i class="el-icon-phone"></i>
            13506879544
          </span>
        </div>
        <div class="top__right">
          <div class="top__right--content" v-for="(value,index) in footerMsg" :key="index">
            <h5>{{value.title}}</h5>
            <ul v-for="(value2,index2) in value.children">
              <li>
                <a :href="value2.url">{{value2.name}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="home-footer__container--bottom">
        <ul>
          <li>浙江理工大学科技与艺术学院</li>
          <li>|</li>
          <li>信息与控制学院</li>
        </ul>
      </div>
    </footer>
  </div>
</template> 

<script>
export default {
  name: 'home',
  data() {
    return {
      // 搜索栏信息
      searchInput: '',
      activeIndex: '',
      // 底部信息
      footerMsg: [
        {
          title: '小区',
          children: [
            {
              url: '#',
              name: '联系我们',
            },
            {
              url: '#',
              name: '资讯',
            },
          ],
        },
        {
          title: '特色',
          children: [
            {
              url: '#',
              name: '人脸门禁',
            },
            {
              url: '#',
              name: '车位推荐',
            },
          ],
        },
        {
          title: '帮助',
          children: [
            {
              url: '#',
              name: '使用手册',
            },
          ],
        },
      ],
      userInfo: {},
      defaultImg: require('../assets/imgs/user.png'),
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    handleSelect(key) {
      let test = window.location.pathname;
      if (key == 'homePageSuggestion' && test == '/homePage') {
        document.body.scrollTop = 1230;
        return;
      }
      if (test) {
        if (test.split('/')[1] == key) {
          return;
        } else if (key == 'homePageSuggestion' && test !== '/homePage') {
          sessionStorage.setItem('scrollFlag', true);
          this.$router.push(`./homePage`);
        } else {
          this.$router.push(`./${key}`);
        }
      }
    },
    navChange(url) {
      this.activeIndex = url;
    },
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    },
    // 退出登录
    logOut() {
      localStorage.removeItem('userInfo');
      this.$router.push('/login');
      this.$message.success('退出登录！');
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.home-header {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 10px 20px;
  .home-header__name {
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
  }
  .home-header__search {
    flex-grow: 1;
    margin: 0 20px;
  }
  .home-header__user {
    display: flex;
    align-items: center;
    span {
      margin-right: 20px;
      font-weight: bold;
    }
  }
}
.home-nav {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 220px;
  margin-top: 65px;
  .el-menu {
    border-right: none;
  }
  .is-actie {
    background-color: #bfa;
  }
}
.home-main {
  width: 100%;
}
.home-footer {
  height: 380px;
  padding: 0 320px;
  background-color: #21325b;
  overflow: hidden;
  .home-footer__container--top {
    display: flex;
    justify-content: flex-start;
    padding-top: 4rem;
    padding-left: 2rem;
    padding-bottom: 2rem;
    .top__left {
      width: 190px;
      .el-icon-s-home {
        font-size: 50px;
        color: rgb(51, 153, 255);
      }
      h4 {
        font-size: 30px;
        color: rgb(51, 153, 255);
      }
      span {
        display: inline-block;
        margin-top: 20px;
        color: #fff;
      }
    }
    .top__right {
      margin-left: 4rem;
      color: #fff;
      display: flex;
      justify-content: flex-start;
      h5 {
        margin-bottom: 1rem;
        color: #fff;
        font-weight: 600;
        line-height: 1.4;
        font-size: 1rem;
      }
      a {
        color: #fff;
      }
      li {
        margin: 1rem 0;
      }
      .top__right--content {
        margin-right: 4rem;
      }
    }
  }
  .home-footer__container--bottom {
    padding-top: 2rem;
    border-top: 1px solid #ccc;
    ul {
      display: flex;
      justify-content: center;
      color: #fff;
      li {
        &:nth-child(2) {
          margin: 0 1rem;
        }
      }
    }
  }
}
.home-call {
  background-image: url('../assets/imgs/blue_bottom.png');
  width: 100%;
  height: 202px;
  h3 {
    text-align: center;
    line-height: 202px;
    font-size: 40px;
    color: #fff;
  }
}
@media screen and (max-width: 1415px) {
  .home-nav {
    padding-right: 0;
    padding-left: 150px;
  }
}
@media screen and (max-width: 1210px) {
  .el-menu-item {
    padding: 0;
    padding-right: 5px;
  }
  .home-nav {
    padding-left: 220px;
  }
}
</style>